<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>编辑文章</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
</head>

<body>
    <div class="layui-container">
        <h1>编辑文章</h1>
        <form class="layui-form" method="post">
            {% csrf_token %}
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" value="{{ article.title }}" required lay-verify="required"
                        placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">内容</label>
                <div class="layui-input-block">
                    <textarea name="content" required lay-verify="required" placeholder="请输入内容"
                        class="layui-textarea">{{ article.content }}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">标签</label>
                <div class="layui-input-block">
                    {% for tag in tags %}
                    <input type="checkbox" name="tags" value="{{ tag.id }}" title="{{ tag.name }}" lay-skin="primary"
                        {% if tag in article.tags.all %}checked{% endif %}>
                    {% endfor %}
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                </div>
            </div>
        </form>
    </div>
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js "></script>
    <script>
        layui.use('form', function () {
            var form = layui.form;
            form.render();
            form.on('submit(formDemo)', function (data) {
                var selectedTags = [];
                $('input[name="tags"]:checked').each(function () {
                    selectedTags.push($(this).val());
                });
                console.log('选中的标签值：', selectedTags);
                return true;
            });
        });
    </script>
</body>

</html>